<template>
    <div class="cityAlaph">
      <ul>
        <li v-for="key of letter" @click="handleAlph" @touchstart="touchHandleStart" @touchend="touchHandleEnd" @touchmove="touchHandleMove" :ref="key">{{key}}</li>
      </ul>
    </div>
</template>

<script>
    export default {
      name: "cityAlaph",
      props:{
        cityList:Object
      },
      data(){
        return{
          touchState:false,
          timer:null
        }
      },
      methods:{
        handleAlph(e){
          this.$emit('change',e.target.innerText)
        },
        touchHandleStart(){
          this.touchState=true;
        },
        touchHandleEnd(){
          this.touchState=false;
        },
        touchHandleMove(e){
          if(this.touchState){
            let startY=310;
            console.log(startY)
            if(this.timer){
              clearTimeout(this.timer)
            }
            this.timer=setTimeout(()=>{
              let touchY=e.touches[0].clientY;
              let index=Math.floor((touchY-310)/14);
              if(index>=0 && index<=26){
                this.$emit('change',this.letter[index])
              }
            },16);
          }
        }
      },
      computed:{
        letter(){
          let letters=[];
          for( let i in this.cityList){
            letters.push(i)
          }
          return letters
        }
      }
    }
</script>

<style scoped lang="stylus">
  .cityAlaph
    position fixed
    top 70%
    right 0
    transform:translate(0%,-50%);
</style>
